
import {useEffect} from 'react'
import * as echarts from 'echarts';
//  echarts 使用


// 1安装

// 2创建容器


// 3 初始化  echarts 

// 4 echarts 配置  内容




 function  InitEcharts(){

     // 初始化 =》dom 操作
     useEffect(()=>{
        let dom:any = document.getElementById('main')
        var myChart = echarts.init(dom);  

        // 配置

        myChart.setOption({
            title: {  //标题
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          });

     },[])  
    return (
        <div >
            {/* 创建容器 */}
             <div id="main" style={{height:300+'px',width:500+"px"}}></div>
        </div>
    )
 }


 export default  InitEcharts